<template>
  <div class="app-container">
    <el-row :gutter="15">
      <el-col :span="10">
        <el-card
          :body-style="{ padding: '0px' }"
          class="box-card"
          shadow="hover"
        >
          <el-tabs type="card" class="demo-tabs" v-model="activeName">
            <el-tab-pane label="操作日志" name="other"
              ><div style="padding: 20px">
                <el-descriptions
                  :column="1"
                  :style="blockMargin"
                  class="margin-top"
                >
                  <el-descriptions-item label="方法类路径：">{{
                    data?.clazz
                  }}</el-descriptions-item>
                  <el-descriptions-item label="内容：">{{
                    data?.content
                  }}</el-descriptions-item>
                  <el-descriptions-item label="客户端请求IP：">{{
                    data?.clientIp
                  }}</el-descriptions-item>
                  <el-descriptions-item label="操作方法：">{{
                    data?.method
                  }}</el-descriptions-item>
                  <el-descriptions-item label="功能模块：">{{
                    data?.module
                  }}</el-descriptions-item>
                  <el-descriptions-item label="操作用户名字：">{{
                    data?.operator
                  }}</el-descriptions-item>
                  <el-descriptions-item label="	操作用户ID：">{{
                    data?.operatorId
                  }}</el-descriptions-item>
                  <el-descriptions-item label="	请求状态：">{{
                    data?.status
                  }}</el-descriptions-item>
                  <el-descriptions-item label="总时间：">{{
                    data?.totalTime
                  }}</el-descriptions-item>
                  <el-descriptions-item label="创建时间：">{{
                    data?.createdTime
                  }}</el-descriptions-item>
                  <el-descriptions-item label="结束时间：">{{
                    data?.endTime
                  }}</el-descriptions-item>
                  <el-descriptions-item label="开始时间：">{{
                    data?.startTime
                  }}</el-descriptions-item>
                  <el-descriptions-item label="更新时间：">{{
                    data?.updatedTime
                  }}</el-descriptions-item>
                </el-descriptions>
              </div></el-tab-pane
            >
            <el-tab-pane label="返回数据" name="returnData"
              ><json-viewer
                :value="jsonDataReturn"
                copyable
                sort
                :expand-depth="4"
            /></el-tab-pane>
            <el-tab-pane label="请求参数" name="ParamsData"
              ><json-viewer
                :value="jsonDataParams"
                copyable
                sort
                :expand-depth="4"
            /></el-tab-pane>
          </el-tabs> </el-card
      ></el-col>
    </el-row>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { getLogs } from "@/api/system/logs";
const route = useRoute();
const activeName = ref("other");
const data = ref();
const jsonDataReturn = ref({});
const jsonDataParams = ref({});
function getList() {
  console.log(route.params.logsId);
  getLogs(route.params.logsId).then((res) => {
    data.value = res;
    console.log(res);
    jsonDataParams.value = JSON.parse(res.params);
    jsonDataReturn.value = JSON.parse(res.returnData);
  });
}
getList();
</script>
<style>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 8px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 580px;
  height: 600px;
}
</style>